<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑频道管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
      </div>
      <el-form ref="form" :model="editForm" label-width="140px">
        <el-form-item label="频道名称">
          <el-input v-model="editForm.name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="/oss/img"
            :file-list="fileList"
            list-type="picture-card"
            name="object"
            :on-success="uploadSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="this.dialogImg" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态" >
          <el-radio-group v-model="editForm.stauts">
            <el-radio :label="1">激活</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { queryChannelList, updateChannelList } from '@/api/channel'

export default {
  name: 'editChanel',
  data(){
    return{
      editForm:{},
      channels:[],
      fileList:[],
      dialogVisible:false,
      dialogImg:"",
    }
  },
  created() {
    this.getData()
  },
  methods:{
    //获取当前ID数据
    getData(){
      const id=this.$route.query.id
      queryChannelList(id).then(res=>{
        this.editForm=res.data
        res.data.images.split(',').forEach(imgUrl => {
          this.fileList.push({ url: imgUrl })
        })
      })
    },
    back(){
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/tweet/channel')
    },
    //  图片上传成功时的回调
    uploadSuccess(file, fileList) {
      this.fileList.push({ url: fileList.response.data })
    },
    // 移除上传图片数据
    handleRemove(file, fileList) {
      this.fileList=fileList
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    onSubmit(){
      updateChannelList({
        id:this.$route.query.id,
        images: this.fileList.map(item => item.url).join(','),
        name:this.editForm.name,
        stauts:this.editForm.stauts
      }).then(()=>{
        this.$message.success('更新成功')
        this.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
}
</style>
